<template>
  <el-dialog
    class="custom-dialog"
    v-model="visible"
    align-center
    :show-close="false"
    :fullscreen="dialogFullScreen"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    @close="handleCloseDialog"
    v-bind="$attrs"
    :style="{ '--dialog-body-height': dialogHeight || '85vh' }"
  >
    <!-- 自定义标题插槽 -->
    <template #header="{ close }">
      <div class="custom-dialog-header">
        <h4 class="el-dialog-title">{{ mergedConfig.dialogTitle }}</h4>
        <div class="custom-dialog-menu">
          <el-icon @click="dialogFullScreen = !dialogFullScreen" style="margin-right: 15px"><FullScreen /></el-icon>
          <el-icon @click="close"><Close /></el-icon>
        </div>
      </div>
    </template>
    <!-- 自定义内容插槽 -->
    <template #default>
      <slot></slot>
    </template>
    <!-- 自定义底部插槽 -->
    <template v-if="mergedConfig.isShowFooter" #footer>
      <div style="width: 100%; text-align: center; padding: 0 20px 20px 20px">
        <slot name="footer">
          <el-button @click="onCancel" v-bind="mergedConfig?.cancelProps" :loading="cancelLoading"> 取消 </el-button>
          <el-button @click="onConfirm" v-bind="mergedConfig?.confirmProps" :loading="confirmLoading"> 确认 </el-button>
        </slot>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
const props = defineProps({
  dialogConfig: {
    type: Object,
    default: () => ({})
  },
  dialogHeight: {
    type: String,
    default: '85vh'
  }
})
// 默认配置
const defaultConfig = {
  handleCancel: () => Promise.resolve(),
  handleConfirm: () => Promise.resolve(),
  confirmProps: { type: 'primary' },
  cancelProps: { type: 'danger' },
  dialogTitle: 'title',
  isShowFooter: true
}
// 合并配置
const mergedConfig = computed(() => {
  return {
    ...defaultConfig,
    ...props.dialogConfig
  }
})

// 状态变量
const visible = ref(false)
const confirmLoading = ref(false)
const cancelLoading = ref(false)
const dialogFullScreen = ref(false)

const emit = defineEmits(['closeDialog'])

// 打开对话框
const openDialog = () => {
  visible.value = true
}

// 关闭对话框
const closeDialog = () => {
  visible.value = false
}
const handleCloseDialog = () => {
  emit('closeDialog')
}

// 取消按钮逻辑
const onCancel = async () => {
  cancelLoading.value = true
  try {
    await mergedConfig.value.handleCancel()
    closeDialog()
  } catch (error) {
    console.error('Cancel error: ', error)
  } finally {
    cancelLoading.value = false
  }
}

// 确认按钮逻辑
const onConfirm = async () => {
  confirmLoading.value = true
  try {
    await mergedConfig.value.handleConfirm()
    closeDialog()
  } catch (error) {
    console.error('Confirm error: ', error)
  } finally {
    confirmLoading.value = false
  }
}

// 暴露方法
defineExpose({
  openDialog,
  closeDialog
})
</script>

<style lang="scss">
.custom-dialog {
  padding: 0 !important;
  .el-dialog__body {
    height: var(--dialog-body-height, 85vh);
    padding: 10px;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  .el-dialog__header {
    padding-bottom: 0 !important;
  }

  .custom-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px;
    border-radius: 5px 5px 0 0;
    background-color: var(--v3-body-bg-color);
    .custom-dialog-menu {
      i {
        cursor: pointer;
        color: #909399;
        &:hover {
          color: #409eff;
        }
      }
    }
  }
}
</style>
